<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>二级菜单</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .menu{
                width: 600px;
                height: 80px;
                background: #969696;
                margin: auto;
            }
            .menu li{
                width: 100px;
                background: paleturquoise;
                list-style: none;
                height: 80px;
                line-height: 80px;
                float: left;
            }
            .de{
                background: #00c0a5;
                height:80px;
                position: absolute;
                width: 100%;
                left: 0;
                display: none;
                /*!*过度属性*!
                transition: all 0.6s;
                height: 0;!*令高度为零，但是存在文字，会发现任然存在文字，高度仍然有，是由于文字撑开的*!
                overflow: hidden;!*令文字隐藏*!*/
            }
            .menu li:hover ul{
                display: block;
               /* height: 80px;*/
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li>
                小米官网1
                <ul class="de">
                    <li>小米商城1</li>
                    <li>小米商城2</li>
                    <li>小米商城3</li>
                    <li>小米商城4</li>
                    <li>小米商城5</li>
                </ul>
            </li>
            <li>
                小米官网2
                <ul class="de">
                    <li>小米商城1.1</li>
                    <li>小米商城2.1</li>
                    <li>小米商城3.1</li>
                    <li>小米商城4.1</li>
                    <li>小米商城5.1</li>
                </ul>
            </li>
            <li>
                小米官网3
                <ul class="de">
                    <li>小米商城1.2</li>
                    <li>小米商城2.2</li>
                    <li>小米商城3.2</li>
                    <li>小米商城4.2</li>
                    <li>小米商城5.2</li>
                </ul>
            </li>
            <li>
                小米官网4
                <ul class="de">
                    <li>小米商城1.3</li>
                    <li>小米商城2.3</li>
                    <li>小米商城3.3</li>
                    <li>小米商城4.3</li>
                    <li>小米商城5.3</li>
                </ul>
            </li>
        </ul>
    </body>
</html>